<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>胶囊式动态复选框</title>
    <link rel="stylesheet" href="./24-胶囊式动态复选框.css">
</head>
<style>
	body {
	    height: 100vh;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    background-color: #e8e8e8;
	}
	
	.checkbox-wrapper-41 {
	    --size: 100px;
	}
	
	.checkbox-wrapper-41 input[type="checkbox"] {
	    -webkit-appearance: none;
	    width: var(--size);
	    height: calc(var(--size) / 2);
	    background-color: #fff;
	    border: 3px solid #222;
	    border-radius: 30px 100px 100px 100px;
	    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
	    outline: none;
	    cursor: pointer;
	    position: relative;
	    transition: all 0.5s;
	}
	
	.checkbox-wrapper-41 input[type="checkbox"]::before {
	    content: "";
	    position: absolute;
	    width: calc(var(--size) / 2);
	    height: calc(var(--size) / 2);
	    left: 0;
	    top: 50%;
	    transform: translateY(-50%) scale(0.7);
	    border: 3px solid #222;
	    border-radius: 30px 100px 100px 100px;
	    background-color: #fde881;
	    box-sizing: border-box;
	    transition: all 0.5s;
	}
	
	.checkbox-wrapper-41 input[type="checkbox"]:checked {
	    background-color: #fde881;
	    border-radius: 100px 100px 30px 100px;
	}
	
	.checkbox-wrapper-41 input[type="checkbox"]:checked::before {
	    left: 50%;
	    background-color: #fff;
	    border-radius: 100px 100px 30px 100px;
	}
</style>
<body>
    <div class="checkbox-wrapper-41">
        <input type="checkbox">
    </div>
</body>

</html>